import React, {Component} from 'react';

import List from '../list/list';

export default class Table extends Component {
  constructor (props) {
    super (props);
    this.state = {
      name: 'aaa',
      time: '2018-6-18',
      money: 222,
      input1: '选择一条数据',
      lists: [
        {
          id: 0,
          name: 'aaa',
          time: '2018-6-18',
          money: 222,
        },
        {
          id: 1,
          name: 'bbb',
          time: '2018-6-18',
          money: 222,
        },
        {
          id: 2,
          name: 'ccc',
          time: '2018-6-18',
          money: 222,
        },
      ],
    };
    this.handleClick = this.handleClick.bind (this);
  }

  handleClick (msg) {
    console.log (msg);
    this.setState ({
      input1: msg,
    });
  }
  render () {
    return (
      <div>
        <form className="form-inline">
          <div className="form-group">
            <label htmlFor="exampleInputName2">Name</label>
            <input
              type="text"
              className="form-control"
              id="exampleInputName2"
              placeholder="Jane Doe"
            />
            <label>选择的姓名</label>
            <input
              type="text"
              className="form-control"
              value={this.state.input1}
              readOnly="readOnly"
            />
          </div>
        </form>
        <List lists={this.state.lists} handleClick={this.handleClick} />
      </div>
    );
  }
}
